<template>
  <button :style="styles" @click="handleClick">
    <!-- @slot Use this slot to place the button content -->
    <slot />
  </button>
</template>

<script>
import sizeMixin from '../sizeMixin';
export default {
  name: 'AppButton',
  mixins: [sizeMixin],
  props: {
    /**
     * Sets the button font color
     */
    color: {
      type: String,
      default: 'black'
    },
    /** Sets background color of the button
     * @since 1.2.0
     */
    background: {
      type: String,
      default: 'white'
    },
    /** @deprecated Use color instead */
    oldColor: String
  },
  computed: {
    styles() {
      return {
        'font-size': this.size,
        color: this.color,
        background: this.background
      };
    }
  },
  methods: {
    handleClick(e) {
      /** Triggered when button is clicked
       * @event click
       * @type {Event}
       */
      this.$emit('click', e);

      /** Event for Alligator's example
       * @event gator
       * @type {Event}
       */
      this.$emit('gator', e);
    }
  }
};
</script>

<docs lang="md">
This button is amazing, use it responsibly.

## 示例

Orange button:

```jsx
<app-button color="orange">Push Me</app-button>
```

Ugly button with pink font and blue background:

```jsx
<app-button color="pink" background="blue">
	Ugly button
</app-button>
```

Button containing custom tags:

```jsx
<app-button>
	Text with <b>bold</b>
</app-button>
```
</docs>
